<template>
  <view class="container">
    <view class="login-icon">
      <image
        class="login-img"
        src="@/static/image/login/login.png"
      />
      <view class="title">
        <view class="title-icon">
          <image
            class="icon-img"
            src="@/static/image/login/logo.png"
          />
        </view>
        <view class="title-info">
          demo系统
        </view>
      </view>
    </view>
    <view class="login-form">
      <view class="title">
        用户登录
      </view>
      <view class="common">
        <view class="left">
          <image
            class="icon-img"
            src="@/static/image/login/username.png"
          />
          <view class="name">
            用户名:
          </view>
        </view>
        <view class="right">
          <input
            type="text"
            v-model="userInfo.username"
            placeholder="请输入账号"
          >
        </view>
      </view>
      <view class="common">
        <view class="left">
          <image
            class="icon-img"
            src="@/static/image/login/password.png"
          />
          <view
            style="letter-spacing: 12rpx;"
            class="name"
          >
            密码:
          </view>
        </view>
        <view class="right">
          <input
            type="password"
            v-model="userInfo.password"
            password="true"
            placeholder="请输入密码"
          >
        </view>
      </view>
      <view
        class="login"
        @click="goIndexPage"
      >
        登录
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import { useSystemStore } from '@/store/system.js'
import { useRouter } from '@/hooks/router'

const systemStore = useSystemStore()

const router = useRouter()

const userInfo = reactive({
  username: '',
  password: ''
})
const goIndexPage = () => {
  if (systemStore.isLogin) {
    // uni.switchTab({
    //   url: '/pages/home/index'
    // })
    router.pushTab('/pages/home/index')
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  .login-icon {
    .login-img {
      width: 100%;
    }
    .title {
      position: absolute;
      top: 10%;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transform: translateX(-50%);
      .title-icon {
        width: 118rpx;
        height: 104rpx;
        .icon-img {
          width: 118rpx;
          height: 104rpx;
        }
      }
      .title-info {
        margin-top: 46rpx;
        font-size: 40rpx;
        font-weight: 700;
        white-space: nowrap;
        color: #ffffff;
      }
    }
  }
  .login-form {
    position: relative;
    top: -50rpx;
    z-index: 2;
    width: 100%;
    border-radius: 40rpx;
    background-color: #ffffff;
    .title {
      padding-top: 74rpx;
      padding-bottom: 68rpx;
      font-size: 40rpx;
      font-weight: 700;
      text-align: center;
      color: #0078d4;
    }
    .common {
      display: flex;
      align-items: center;
      margin: 0 auto;
      margin-bottom: 38rpx;
      width: 600rpx;
      height: 88rpx;
      border: 2rpx solid #d2d2d2;
      border-radius: 8rpx;
      background: linear-gradient(0deg, #ffffff, #ffffff 41%, #ffffff);
      .left {
        display: flex;
        align-items: center;
        .name {
          padding: 0 18rpx;
          width: 148rpx;
          font-size: 28rpx;
          font-weight: 700;
          color: #666666;
        }
        .icon-img {
          margin-left: 14rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
    .login {
      margin: 0 auto;
      width: 600rpx;
      height: 96rpx;
      font-size: 36rpx;
      border-radius: 8rpx;
      text-align: center;
      color: #ffffff;
      background: linear-gradient(0deg, #0287ef, #1197ff);
      box-shadow: 0 10rpx 10rpx 0 rgb(16 134 224 / 15%);
      line-height: 96rpx;
    }
  }
  .bottom {
    position: absolute;
    bottom: 58rpx;
    left: 50%;
    font-size: 22rpx;
    color: #888888;
    transform: translateX(-50%);
  }
  .save-password {
    margin-top: 60rpx;
    margin-left: 76rpx;
  }
}
</style>
